<template>
    <div>
        <div class="breadcrumb-box">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>审批人管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="address-rece container">
            <left-nav-bar :active="active"></left-nav-bar>
            <div class="right">
                <!--        <div style="height:91px;"></div>-->
                <div class="line-ti">
                    <div>审批人管理</div>
                </div>

                <div class="order-detail">
                    <div class="approve">
                        <div class="addAddr" @click="showAppDialog">新增审批人</div>
                        <ul class="ul" v-if="approveList.length">
                            <li class="li td-fsc a" :class="item.checked?'select':''" v-for="(item, idx) in approveList" :key="idx" @click="_selectItem(idx)">

                                <div class="detail" style="width:120px">{{item.username}}</div>
                                <div class="name"> {{item.phone}}</div>
                                <div class="td-fbc edit-box">
                                    <!-- <img :src="$global.Image.icon_edit" /> -->
                                    <span v-if="item.is_default" class="span1">默认</span>
                                    <span class="span3"  @click.stop="showAppEditDialog(item.id)">编辑</span>
                                </div>
                            </li>
                        </ul>
                        <div class="nodata" v-if="!loading &&!approveList.length">
                            <img :src="$global.Image.noData" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <v-approveDialog ref="approveDialog"></v-approveDialog>
        <div style="height: 200px"></div>
    </div>

</template>

<script>
import leftNavBar from "@components/leftNavBar";
import { getApproveList } from "../../api/user";
import ApproveDialog from "@components/ApproveDialog";
export default {
    data() {
        return {
            loading: false,
            active: 6,
            approveInfo: {},
            approveList: [],
        };
    },
    components: {
        "v-approveDialog": ApproveDialog,
        leftNavBar: leftNavBar,
    },
    mounted(){
        this.getApprove()
    },
    methods: {
        /**
         * 新增审批人
         */
        showAppDialog(id) {
            this.$refs["approveDialog"].showAppDialog(id,() => {
                this.getApprove();
            });
        },
        /**
         * 编辑审批人
         */
        showAppEditDialog(id) {
            this.$refs["approveDialog"].showEditDialog(id,() => {
                this.getApprove();
            });
        },
        // 选择审批人
        _selectItem(index) {
            this.approveList.map((item) => {
                item.checked = false;
            });
            this.approveList[index].checked = true;
            this.approveInfo = this.approveList[index];
            this.$forceUpdate();
        },
        // 获取审批人列表
        getApprove() {
            this.loading = true
            getApproveList().then((res) => {
                this.loading = false
                this.approveList = res.data;
                this.approveList.map((item) => {
                    if (item.is_default) {
                        item.checked = true;
                        this.approveInfo = item;
                    } else {
                        item.checked = false;
                    }
                });
            });
        },
    },
};
</script>

<style scoped  lang="scss" scoped>
$color: #da213d;
.address-rece {
    /*width: 70%;*/
    margin: 0 auto;
    display: flex;

    .right {
        width: 1000px;
        margin-left: 32px;

        .line-ti {
            width: 100%;
            border-bottom: 1px solid #dbdbdb;
            position: relative;
            &::before {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 72px;
                height: 3px;
                content: "";
                background: $color;
            }
            > div {
                color: #da213d;
                font-size: 18px;
                font-family: MicrosoftYaHei-Bold;
                // width: 90px;
                line-height: 36px;
                font-weight: 600;
                // text-align: center;
            }
        }
        .order-detail {
            width: 1200px;
            margin: 0 auto;
            padding-top: 0;
            padding-bottom: 60px;
            .line-ti {
                width: 100%;
                border-bottom: 1px solid #dbdbdb;
                > div {
                    color: #da213d;
                    font-size: 18px;
                    // border-bottom: 3px solid $color;
                    // width: 112px;
                    line-height: 36px;
                    font-weight: bold;
                    position: relative;
                    &::before {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        content: "";
                        width: 72px;
                        height: 3px;
                        background: #da213d;
                    }
                }
            }
            .approve {
                margin-top: 40px;
                ul {
                    width: 100%;
                    // border: 1px solid #dbdbdb;
                    min-height: 240px;
                    margin-bottom: 40px;
                    
                    li {
                        width: 620px;
                        height: 46px;
                        margin-top: 20px;
                        font-size: 16px;
                        border: 1px solid #eaa090;
                        border-radius: 5px;
                        color: #333;
                        .li-info-name {
                            margin: 0 55px 0 30px;
                            font-size: 18px;
                            width: 90px;
                            font-weight: bold;
                            color: #da213d;
                            line-height: 46px;
                        }
                        div {
                            margin-left: 20px;
                        }
                        img {
                            display: block;
                            width: 20px;
                            height: 20px;
                        }
                        .edit-box {
                            // display: none;
                            justify-content: flex-end;
                            flex: 1;
                            // margin-right: 8px;
                            img {
                                width: 16px;
                                height: 16px;
                                margin-right: 5px;
                            }
                            .span1 {
                                width: 40px;
                                height: 20px;
                                background: linear-gradient(
                                    143deg,
                                    #da213d 23%,
                                    #da213d 90%
                                );
                                border-radius: 2px;
                                line-height: 20px;
                                font-size: 18px;
                                font-weight: bold;
                                margin-right: 72px;
                                font-size: 13px;
                                text-align: center;
                                color: #ffffff;
                            }
                            .span2 {
                                font-size: 18px;
                                font-weight: bold;
                                color: #3ca9d7;
                                margin-right: 30px;
                            }
                            .span3 {
                                font-size: 14px;
                                color: #014a97;
                                margin-right: 35px;
                                position: relative;
                                &::before {
                                    position: absolute;
                                    left: -35px;
                                    top: 0;
                                    bottom: 0;
                                    margin: auto 0;
                                    width: 1px;
                                    height: 20px;
                                    background: #eaa090;
                                    content: "";
                                }
                            }
                        }
                    }
                    li:hover .edit-box {
                        display: flex;
                    }
                    li.select {
                        color: #333333;
                        font-weight: bold;
                        background: #fbf7f7;
                        border: 1px solid #eaa090;
                    }
                }
                .addAddr {
                    width: 110px;
                    height: 34px;
                    background: linear-gradient(
                        143deg,
                        #da213d 23%,
                        #da213d 90%
                    );
                    border-radius: 5px;
                    cursor: pointer;
                    font-size: 14px;
                    text-align: center;
                    color: #ffffff;
                    line-height: 34px;
                    margin: 30px 0;
                }
            }
        }
    }
}
</style>